<template>
	<view class="recovery-record-page relative">
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
		
		<!-- #ifdef MP-WEIXIN -->
		<comDetailNavigateBack title="进击记录" />
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<comDetailNavigateBack title="退货记录" />
		<!-- #endif -->
		
		<scroll-view scroll-y class="scroll-y" @scrolltolower="scrolltolower" :style="{ height: 'calc(100vh - ' + commonNavHeight + ')' }">
			<view class="recovery-list-box relative" v-if="resLists && resLists.length">
				<view v-for="(item, index) in resLists" :key="index" class="recovery-list-item relative" @scrolltolower="scrolltolower">
					
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/item-bg.png`" class="bg" />
					
					<view class="list-item-top flex relative">
						<image :src="item.avatar" class="icon-avatar" />
						<view class="top-view">
							<view class="list-item-title">{{ item.nickname }}</view>
							<!-- #ifdef MP-WEIXIN -->
							<view class="list-item-return-time">进击时间：{{ item.create_time }}</view>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<view class="list-item-return-time">退货时间：{{ item.create_time }}</view>
							<!-- #endif -->
						</view>
					</view>
					
					<scroll-view scroll-x class="relative imgs-view-scroll">
						<view class="flex">
							<view class="imgs-view relative" v-for="(imgItem, imgIndex) in item.detail_list" :key="imgIndex">
								
								<view class="imgs-view-content relative flex-all-center">
									<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/cover-bg.png`"
									class="bg" mode=""></image>
									
									<comPlaceImage
										mode="heightFix"
										style="width: 143rpx;height: 143rpx;border-radius: 10rpx;" :lazyLoad="true"
										:src="imgItem.reward_item_cover"></comPlaceImage>
								</view>
								
					
								<view class="item-name-txt truncate">{{ imgItem.reward_item_name }}</view>
								<view class="num-bg absolute" v-if="imgItem.reward_item_num">
									<image class="bg" 
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/recovery/num-bg.png`"
									mode=""></image>
									<text class="relative">x{{ imgItem.reward_item_num }}</text>
								</view>
							</view>
						</view>
					</scroll-view>

					<view class="item-price relative">
						商品价值：
						<text>¥{{ item.recovery_price }}</text
						>
					</view>
				</view>
				<comLoadMore :loading="loading" :showLoadendTxt="showLoadendTxt" class="loadmore-txt"></comLoadMore>
			</view>
			<comEmptyData v-else></comEmptyData>
		</scroll-view>
	</view>
</template>

<script>
	import { getUserRecoveryLogApi } from '@/setupproject/INTERFACE.js';
	import store from '@/store';
	import pager from '@/inmixed/paging.mixin.js';
	export default {
		name: 'returnRecordPage',
		mixins: [pager],
		data() {
			return {
				loading: false
			};
		},
		computed: {
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		onLoad() {
			/* paging.mixin.js Methods */
			this.pagingInitFun();
		},
		methods: {
			async listsGetFun() {
				this.loading = true
				const { data, code } = await getUserRecoveryLogApi({ page: this.pageInfoObj.page, page_size: this.pageInfoObj.page_size });
				this.loading = false;
				data.resLists = data.list;
				return data;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.recovery-record-page {
		width: 100%;
		height: 100%;
		
		.recovery-list-box {
			width: 100%;
			padding-bottom: 18rpx;
			.recovery-list-item {
				color: #FFFFFF;
				margin: auto auto 20rpx;
				padding: 30rpx;
				font-size: 28rpx;
				width: 710rpx;
				
				.list-item-top {
					width: 100%;
					align-items: center;
					margin-bottom: 12rpx;
					.list-item-title {
						margin-bottom: 12rpx;
					}
					.list-item-return-time {
						font-size: 24rpx;
						color: #FFFFFF;
					}
					
					.icon-avatar {
						width: 64rpx;
						height: 64rpx;
						border-radius: 100%;
					}
					.top-view {
						margin-left: 24rpx;
					}
				}
				.imgs-view-scroll {
					width: 100%;
					overflow: hidden;
					.imgs-view {
						margin: 10rpx 25rpx 30rpx 0;
						
						.imgs-view-content {
							width: 162rpx;
							height: 162rpx;
							overflow: hidden;
						}
					
						.num-bg {
							padding: 0 8rpx 0 0;
							text-align: end;
							font-size: 18rpx;
							color: #FFFFFF;
							right: 4rpx;
							bottom: 42rpx;
							min-width: 48rpx;
							height: 22rpx;
							line-height: 22rpx;
							z-index: 10;
						}
					
						.item-name-txt {
							font-size: 20rpx;
							width: 148rpx;
							margin-top: 14rpx;
							text-align: center;
						}
					}
				}
				.item-price {
					font-size: 26rpx;
					color: #FFFFFF;
					text {
						font-size: 34rpx;
						color: #63FFF7;
					}
				}
			}
		}
		
	}
</style>
